<template>
  <div id="app">
    <div class="header-actions">
  <el-menu :default-active="activeIndex" v-if="$route.name !== 'login'" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <el-menu-item index="1" @click.native.prevent="selectOrder()">处理中心</el-menu-item>
    <el-menu-item index="4" @click.native.prevent="selectBook()">订单管理</el-menu-item>
    <div style="float: right; margin-right: 20px;">
      <el-button v-if="$route.name !== 'login'" type="primary" @click="logout">退出登入</el-button>
    </div>
  </el-menu>
</div>
    <nav>
      <!-- 导航链接等... -->
    </nav>
    <router-view/>
  </div>
</template>

<script>
export default {
  data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
  methods: {
    logout() {
      localStorage.removeItem('token');
      this.$router.push("/login");
    },
    handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
    selectBook() {
      // 此处用于跳转页面
      this.$router.push({ name: 'about' });
      // 如果是基于path的方式，则可以这样写：
      // this.$router.push('/select-book-page');
    },
    selectOrder() {
      // 此处用于跳转页面
      this.$router.push({ name: 'home' });
      // 如果是基于path的方式，则可以这样写：
      // this.$router.push('/select-book-page');
    },
  },
}


</script>

<style>
#app { /* 修正选择器为 #app 而不是 .app-container */
  display: flex;
  flex-direction: column;
  height: 100vh; /* 设置高度为视口高度，确保布局自适应 */
}

/* 添加这个类来定位按钮到右上角 */
</style>